<template>
  <div class="block_main blue-tit">
    <!-- <div class="nytit">首页&gt;通知/督办</div> -->

    <el-row style="padding-top: 10px" v-loading="loading">
      <el-col :span="24" style="padding:0 5px">
        <el-card>
          <div class="title">{{pagename}}</div>
          <el-form style="width:60%;" :rules="rules" ref="ruleForm" :model="EditForm" label-width="150px" size="small">
            <el-form-item label="企业名称" prop="company">
              <el-input v-model="EditForm.company" placeholder="请输入企业名称"></el-input>
            </el-form-item>
            <el-form-item label="企业类型">
              <div class="block">
                
                <el-cascader
                  expand-trigger="hover"
                  :options="options"
                  v-model="selectedOptions"
                  @change="handleChange">
                </el-cascader>
              </div>
            </el-form-item>
            <el-form-item label="企业联系人" prop="user">
              <el-input v-model="EditForm.user" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="EditForm.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="企业区域">
              <el-select v-model="EditForm.area" placeholder="选择企业区域">
                <el-option v-for="(item,index) in MsgGroup" :label="item.name" :value="item.id" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="详细地址">
              <el-input v-model="EditForm.address" placeholder="请输入详细地址"></el-input>
            </el-form-item>
            <el-form-item label="上传营业执照" >
              
              <el-upload
                class="avatar-uploader"
                :action="httpHome+'direct/Massage/uploadFile'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="filePath" :src="filePath" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

             
            </el-form-item>
            <el-form-item label="上传企业logo" >
              <el-upload
                class="avatar-uploader"
                :action="httpHome+'direct/Massage/uploadFile'"
                :show-file-list="false"
                :on-success="handleAvatarSuccessLogo"
                :before-upload="beforeAvatarUploadLogo">
                <img v-if="filePathLogo" :src="filePathLogo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <div style="padding:20px 60px;margin-top:30px;">
            <el-button size="small" type="primary" @click="saveForm('ruleForm')">提交</el-button>
            <el-button size="small" type="warning" @click="resetForm('ruleForm')">重新填写</el-button>
          </div>
          
        </el-card>
      </el-col>
      
      
    </el-row>

  </div>
</template>
<script>
import actionurl from "@/assets/js/actionurl";
// import selectMenu from "@/components/selectMenu.vue";
import config from "../../config";

export default {
  name: "comedit",
  components: {
    // selectMenu
  },
  data() {
    return {
      pagename:'信息完善',
      loading:false,
      overtime:'',
      httpHome: "",
      dialogImageUrl: '',
      imageUrl: '',
      imageUrlLogo:'',
      dialogImageUrlLogo: '',
      dialogVisible: false,
      selectedOptions:[],
      filePath:'',
      filePathLogo:'',
      options:[],
      MsgGroup:[],
      EditForm: {
        company: "",
        resource: "0",
        form:'0'
      },
      rules: {
        company: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
          { min: 2, message: "长度在2字符以上", trigger: "blur" }
        ],
        user: [
          { required: true, message: "请输入公司联系人", trigger: "blur" }
        ],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }]
      }
    };
  },
  created() {
    
    //设置默认截止日期
      function addZero(n){
          return n<10?'0'+n:''+n
      }
      var ddd = new Date();

      var month=ddd.getMonth()+1;
      var day =  ddd.getDate()+7;
      var year = ddd.getFullYear();
      if(month==0){
        month=12;
        year=year-1;
      }
      if(month<10){
        month = addZero(month); 
      }
      this.getComInfo();
      this.getGroup();
      this.overtime= year+"-"+month+"-"+day;
      this.httpHome = config.URLWEBHTTP;
      this.getArea();
    // console.log(config,123);

  },

  methods: {
    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
  
        this.filePath = this.httpHome + file.response.data.path;

    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    handleAvatarSuccessLogo(res, file) {
        this.imageUrlLogo = URL.createObjectURL(file.raw);
        this.filePathLogo =this.httpHome + file.response.data.path;

    },
    beforeAvatarUploadLogo(file) {
 
      const isLt2M = file.size / 1024 / 1024 < 2;

    
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    resetForm(formName) {//重置
      this.$refs[formName].resetFields();
    },
    
    getComInfo(){
      var _this = this;
      actionurl.comGetUserInfo(
        {},
        function(re) {
          console.log(re);
          _this.EditForm={
            company:re.data.name,
            user:re.data.contacts,
            phone:re.data.contacts_phone,
            address:re.data.address,
            id:re.data.id,
            gid:re.data.jilian[0],
            fgid:re.data.jilian[1],
            area:re.data.area
          }
          _this.selectedOptions = re.data.jilian;
          _this.filePath =re.data.business_pic;
          _this.filePathLogo =re.data.pic;
      })
    },
    saveForm(formName) {//提交事件
      //保存操作
      this.loading = true;
      // return;
      var _this = this;
      console.log(_this.EditForm);
      // return;
      _this.$refs[formName].validate(valid => {
        if (valid) {
          _this.loading = true;
          actionurl.comEditUserInfo(
            {
              id: _this.EditForm.id,
              gid: _this.EditForm.gid,
              fgid: _this.EditForm.fgid,
              phone: _this.EditForm.phone,
              name: _this.EditForm.company,
              contacts: _this.EditForm.user,
              address: _this.EditForm.address,
              contacts_phone: _this.EditForm.phone,
              area: _this.EditForm.area,
              business_pic: _this.filePath,
              pic: _this.filePathLogo
            },
            function(re) {
              if(re.status == 1){
                _this.$message(re.msg);
                _this.loading = false;
                _this.getComInfo();
                // _this.$router.push({ path: "/home" });
              }else{
                _this.$message(re.msg);
                _this.loading = false;
               
              }
              
            }
          );
        } else {
          console.log("error submit!!");
          _this.loading = false;
          return false;
        }
      });
    },
    getArea(){
      var _this = this;
      actionurl.comGetArea(
        {},
        function(re) {
          _this.MsgGroup = re.data;
          
      })
    },
    getGroup(){
      var _this = this;
      actionurl.getLibraryGroup(
        {},
        function(re) {
         
          
          _this.options = re.data;
          
      })
    },
    handleChange(val){
      // console.log(val);
      this.EditForm.gid = val[0];
      this.EditForm.fgid = val[1];
    }
  },
  mounted() {
    
  }
};
</script>
<style scoped lang="scss">
.btnflex {
  display: flex;
  position: relative;

  // .add{
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  // }
  p {
    margin-right: 20px;
  }
}
.el-form--inline.selectinput .el-form-item {
  position: relative;
}
.el-form--inline.selectinput .el-form-item:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #f00 transparent transparent;
  position: absolute;
  right: 0;
  top: 1px;
  z-index: 1;
}
.el-form--inline.selectinput {
  padding-left: 20px;
}
.el-form--inline.selectinput .el-form-item .el-input__inner {
  text-align: center;
}
.el-form--inline.selectinput .el-form-item .el-icon-close {
  position: absolute;
  right: 0;
  top: 1px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  z-index: 2;
}
label {
  display: inline-block;
  text-align: right;
  padding: 0 12px 0 0;
}
.el-cascader{
  width: 100%;
}


 
</style>
